<template>
	<view class="category">
		<!-- 搜索栏 -->
		<u-search placeholder="请输入搜索的内容" :showAction='false'inputAlign='center' margin="16rpx" v-model="keyword"></u-search>
		
		<!-- 内容区 -->
		<u-row>
			<u-col span="3">
				<view class="categoryLeft">
					<u-list :height="screenHeight">
						<view class="categoryLeft-name" :class="{active:index === nav}" v-for="(item,index) in categoryDatas" :key="index" @click="changeCategory(index,item)">
							{{item.section}}
						</view>
						<!-- <view class="categoryLeft-name active">11111</view> -->
					</u-list>
				</view>
			</u-col>
			<u-col span="9">
				<view class="categoryRight">
					<u-list :height="screenHeight">
						<image class="categoryRight-bigImg" src="" mode=""></image>
						<u-grid :border="false" >
							<u-grid-item v-for="(item,index) in doctorList" :key="index" @click="goDoctorDetail">
								<image class="categoryRight-smallImg" src="" mode=""></image>
								<text class="categoryRight-name">{{item.name}}</text>
								<!-- <text class="categoryRight-name">1111</text> -->
							</u-grid-item>
						</u-grid>
					</u-list>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				//导航选中标识
				nav:0,
				//分类总数据
				categoryDatas:[{
					section:'儿科',
					doctor:[{name:'张医生'},{name:'李医生'},{name:'王医生'},{name:'吴医生'}]
				},
				{
					section:'脑科',
					doctor:[{name:'小医生'},{name:'大医生'},{name:'老医生'},{name:'中医生'}]
				},
				{
					section:'皮肤科',
					doctor:[{name:'周医生'},{name:'李医生'},{name:'郑医生'},{name:'王医生'}]
				},
				{
					section:'外科',
					doctor:[{name:'a医生'},{name:'b医生'},{name:'v医生'},{name:'c医生'}]
				},{
					section:'内科',
					doctor:[{name:'q医生'},{name:'w医生'},{name:'e医生'},{name:'r医生'}]
				}],
				//分类大图
				bigImg:'',
				//右侧数据
				doctorList:[],
				//页面高度
				screenHeight:0
			}
		},
		methods: {
			//切换左侧分类按钮
			changeCategory(index,item){
				console.log(item,index)
				this.doctorList = item.doctor
				this.nav = index
				// this.bigImg = item.imgUrl
				// console.log(this.categoryRight)
			},
			// 点击进入医生详情
			goDoctorDetail(){
				uni.navigateTo({
					url:"../component/doctorDetail/doctorDetail"
				})
			}
		},
		mounted() {
			this.doctorList = this.categoryDatas[0].doctor
			// this.getCategoryList()
			//获取页面高度
			this.screenHeight = uni.getSystemInfoSync().windowHeight - 51; //获取当前页面的高度
		}
	}
</script>
	
<style lang="scss" scoped>
.categoryLeft{
	border-top:2rpx solid  #6ea9ff;
	border-right:2rpx solid  #6ea9ff;
	.categoryLeft-name{
		position: relative;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		&.active::before{
			content: '';
			width: 4rpx;
			height: 56rpx;
			background-color: #6ea9ff;
			position: absolute;
			top: 8rpx;
			left: 14rpx;
		}
	}
}
.categoryRight{
	border-top:2rpx solid  #6ea9ff;
	.categoryRight-bigImg{
		background-color: #6ea9ff;
		margin: 8rpx auto;
		height: 250rpx;
		width: 520rpx;
	}
	.categoryRight-smallImg{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		
		background-color: #6ea9ff;
	}
	.categoryRight-name{
		font-size: 28rpx;
	}
}
</style>

